<template>
  <div style="text-align: center">
    <div class="top_nav" style="width: 70%;margin: auto;text-align: left;">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="四史学习" name="first" v-text="this.tabName"></el-tab-pane>
        <el-tab-pane label="统战条例解读" name="second" v-text="this.tabName"></el-tab-pane>
        <el-tab-pane label="新型党政关系相关论述" name="third" v-text="this.tabName"></el-tab-pane>
        <el-tab-pane label="国家大正方针公布" name="fourth" v-text="this.tabName"></el-tab-pane>
        <el-tab-pane label="社会热点问题解析" name="fifth" v-text="this.tabName"></el-tab-pane>
        <el-tab-pane label="各民主党派历史合介绍" name="sixth" v-text="this.tabName"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="main_content" style="width: 70%;margin: auto;text-align: left" v-for="index in 5" >
      <el-card class="box-card" style="margin-bottom: 10px;margin-top: 10px">
        <div class="text item">
          <h4 v-text="'这是一则'+tabName+'的测试新闻'+index"></h4>
          <p style="text-indent:2em;font-size: 12px">22日上午，国家防总副总指挥、应急管理部党组书记黄明组织水利部、中国气象局、安能公司等单位有关负责人进行防汛抗洪抢险救援救灾工作调度会商会议，视...</p>
          <p style="text-align: right;font-size: 10px">2021年8月4日</p>
        </div>
        <div class="option" style="text-align: right">
          <el-button type="primary" icon="el-icon-edit" circle size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="remove()"></el-button>
        </div>

      </el-card>
    </div>

    <div style="width:90%;text-align: right;margin-top: 20px;margin-bottom: 20px">
      <el-pagination
        @size-change=""
        @current-change=""
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        currentPage3: 5,
        tabName: '四史学习'
      };
    },
    created() {
      this.tabName = '四史学习'
    },
    mounted() {
      this.tabName = '四史学习'
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
        this.tabName = tab.label
      },
      remove() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }
    },

  };
</script>
